<template>
  <div>
    <PlutoTablePrint
        ref="refPlutoTable"
         :columns="systemTable.columns"
        :table-data="systemTable.tableData"
        :total="systemTable.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @filter="handleFilter"
        :show-selection="true"
        :show-actions="false"
        :show-pagination="true"
        :page-sizes="[5, 10, 20, 50]"
        :default-page-size="5"
        :show-index="true">
      <!-- 自定义操作列 -->
          <template v-slot:action="scope">
             <el-button @click="handleDetail(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>

            </template>
    </PlutoTablePrint>
  </div>
</template>

<script>
import PlutoTablePrint from "@/components/PlutoTablePrint/PlutoTablePrint.vue";
import * as api from './api'

export default {
  components: {
    PlutoTablePrint
  },
  data() {
    return {
      systemTable: {
        columns: [
          {prop: 'uid', label: '案件uid', width: '240'},
          {prop: 'caseName', label: '案件名称'},
          {prop: 'caseNumber', label: '案件编号', width: '120'},
          {prop: 'createTime', label: '创建时间', width: '140'},
          // 添加操作列配置
          {
            prop: 'action',
            label: '操作',
            width: '100',
            align: 'center',
            slot: 'action'  // 指定插槽名称
          }
        ],
        tableData: [],
        total: 0,
        filterParams: {
          pageNum: 1,
          pageSize: 5,
          search: ''
        },
      },
    }
  },
  mounted() {
    this.pageTableAndColumList();
  },
  methods: {
    // 分页大小变化
    handleSizeChange(pageSize) {
      this.systemTable.filterParams.pageSize = pageSize;
      this.pagination.pageNum = 1;
      this.pageTableAndColumList();
    },
    // 当前页变化
    handleCurrentChange(pageNum) {
      this.systemTable.filterParams.pageNum = pageNum;
      this.pageTableAndColumList();
    },

    // 筛选处理
    handleFilter(filterText) {
      this.systemTable.filterParams.search = filterText;
      this.systemTable.filterParams.pageNum = 1;
      this.pageTableAndColumList();
    },
    handleDetail(row) {
      // 新标签页打开
      const routeData = this.$router.resolve({
        path: '/case/detail',
        query: { uid: row.uid }
      });
      window.open(routeData.href, '_blank');
    },



    pageTableAndColumList() {
      api.pageList(this.systemTable.filterParams).then(res => {
        if (200 === res.code) {
          this.loading = true;
          this.systemTable.tableData = res.data.list;
          this.systemTable.total = res.data.total;
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
  }
}
</script>

<style scoped>

</style>
